<html>
<head>
<meta charset="utf-8">
<title>Vocabulary</title>
<!-- jQuery Mobile references -->
<script type="text/javascript" src="js/serverconfig.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<link href="css/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/toast.css" type="text/css">
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/localstorage.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
<script src="js/jquery.mobile.simpledialog2.min.js"></script>
<script src="js/plugins/toast.js"></script>
<script type="text/javascript" src="js/favourite.js"></script>
<script type="text/javascript" src="js/listening-detail.js"></script>
<script type="text/javascript" src="cordova-2.0.0.js"></script>

<link rel="stylesheet"
	href="css/jquery.bxslider.css"
	type="text/css">

<!-- Bat cac su kien button click tren inteface -->
<script type="text/javascript">
document.addEventListener("deviceready", onDiviceReady, false);
	//xu ly lesson list in panel
	function onDiviceReady() {
		
		var getLesson = false;
		$("#menu-lesson").click(function() {
			if (getLesson == false) {
				connectDBLesson();
				getLesson = true;
			}
		});
		
		$('a[task="favouriteTask"]').click(function() {
			//lay ve id
			var leId = getUrlVars()["leid"];
			var id = getLocalStorage('listeningIdCurrent');
			processFavourite('li_', 'listening', id);
		});
		connectDB();
		//khi click vaof
	};
	
</script>

<style type="text/css">
#addFavourite:after {
	background-image: url("img/star-16-icon.png");
	background-size: 16px 16px;
}

#addFavourite:after {
	background-image: url("img/star-16-icon.png");
	background-size: 16px 16px;
}
.ui-dialog-contain {
	width: 92.5%;
	max-width: 500px;
	margin: 10% auto 15px auto;
	padding: 0;
	position: relative;
	top: -15px;
}
</style>

</head>

<body>
	<div data-role="page" data-title="Kaiwa">
		<!-- Start header -->
		<div data-role="header" data-position="fixed" data-theme="b">
			<a id="menu-lesson" href="#nav-panel" data-icon="bars"
				data-iconpos="notext"> Menu</a>
			<div data-role="controlgroup" data-type="horizontal"
				class="ui-mini ui-btn-right" data-inline="true">

				<a id="" task="favouriteTask" href="#" data-ajax="false"
					data-direction="reverse"
					class="ui-btn ui-btn-inline ui-icon-star ui-btn-icon-notext">Add/Remove
					Favourite</a> <a href="search.html" id="btnSearch"
					data-iconpos="notext" data-direction="reverse" data-ajax="false"
					class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext">Search</a>

				<a href="favourite.html?action=listening" data-ajax="false"
					data-direction="reverse"
					class="ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-notext">Favourite
					List</a> <a href="index.html" id="btnHome" data-iconpos="notext"
					data-direction="reverse" data-ajax="false"
					class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-notext">Home</a>
			</div>
			<h1 id="title-detail" style="text-align: center;"></h1>
		</div>
		<!-- /header -->

		<!-- Start main content -->
		<div role="main" class="ui-content jqm-content jqm-fullwidth">
			<!-- show audio media -->
			<div id="audio-content" data-type="vertical">
			<div id="popup-download" style="display: none;"><a onclick="checkConnectKaiWa();" id="download-audio" data-role="button" data-rel="popup">Tải file nghe</a></div>
						</div>
			
			<!-- popup tai file nghe -->
			<div data-role="popup" id="khongketnoi-popup" data-theme="a"
				data-overlay-theme="b" class="ui-content"
				style="max-width: 340px; padding-bottom: 2em;">
				<div id="warning">Không thể kết nối mạng.Vui lòng kiểm tra kết
					nối</div>
				<br>
				<center>
					<a id="removeFavouriteOK" href="#" data-rel="back"
						class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left">Ok</a>
				</center>
			</div>
			<!-- popup tai file nghe -->
			<div data-role="popup" id="celldata-popup" data-theme="a"
				data-overlay-theme="b" class="ui-content"
				style="max-width: 340px; padding-bottom: 2em;">
				<div id="warning">Kết nối 3G có thể gây tốn dữ liệu!</div>
				<br>
				<center>
					<a id="removeFavouriteOK" href="#" data-rel="back"
						class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left">Ok</a>
					<a id="removeFavouriteCacel" href="#" data-rel="back"
						class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Cancel</a>
				</center>
			</div>
			<!-- popup tai file nghe -->
			<div data-role="popup" id="waiting-popup" data-theme="a"
				data-overlay-theme="b" class="ui-content"
				style="max-width: 340px; padding-bottom: 2em;">
				<div id="warning">Đang tải dữ liệu, xin vui lòng chờ!</div>
				<br>
			</div>
			<!-- popup tai file nghe -->
			<div data-role="popup" id="complete-popup" data-theme="a"
				data-overlay-theme="b" class="ui-content"
				style="max-width: 340px; padding-bottom: 2em;">
				<div id="warning">Đã download thành công!</div>
				<br>
				<center>
					<a id="removeFavouriteOK" href="#" data-rel="back"
						class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left">Ok</a>
				</center>
			</div>
			<!-- popup tai file nghe -->
			<div data-role="popup" id="error-popup" data-theme="a"
		
				data-overlay-theme="b" class="ui-content"
				style="max-width: 340px; padding-bottom: 2em;">
				<div id="warning">Đownload không thành công!</div>
				<br>
				<center>
					<a id="removeFavouriteOK" href="#" data-rel="back"
						class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left">Ok</a>
				</center>
			</div>

			<!-- End audio media  -->
			<div class="inner clearfix">
				<div class="bx-wrapper"
					style="max-width: 70%; vertical-align: middle">
					<center><img id="listening-thumb" src="" /></center>
				</div>
			</div>

			<!-- Script area -->
			<div data-role="collapsibleset">
				<!-- jp -->
				<div data-role="collapsible" data-theme="a" data-content-theme="a">
					<h2>
						<center>Nội dung tiếng Nhật</center>
					</h2>
					<div role="main" id="content-jp" style="text-align: justify;"></div>
				</div>
				<!-- en -->
				<div data-role="collapsible" data-theme="a" data-content-theme="a">
					<h2>
						<center>Nội dung tiếng Anh</center>
					</h2>
					<div role="main" id="content-en" style="text-align: justify;"></div>
				</div>
				<!-- vi -->
				<div data-role="collapsible" data-theme="a" data-content-theme="a">
					<h2>
						<center>Nội dung tiếng Việt</center>
					</h2>
					<div role="main" id="content-vi" style="text-align: justify;"></div>
				</div>

			</div>
			<!-- /end Script area -->
			
		</div>
		<!-- /content -->



		<!-- Start panel (muc luc)-->
		<div data-role="panel" data-position-fixed="true" data-display="push"
			data-theme="b" id="nav-panel">
			<div data-role="header" data-position-fixed="true" data-theme="b">
				<h5>目次</h5>
			</div>
			<ul data-role="listview" data-inset="true" data-divider-theme="a"
				id="lesson-list">
			</ul>
		</div>
		<!-- /panel -->
	</div>
</body>
</html>